---
// 导入全局样式
import "~/assets/styles/global.scss";
import Header from "~/components/layout/Header.astro";
import Footer from "~/components/layout/Footer.astro";
const { metadata } = Astro.props;
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.png" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{metadata.title}</title>
  </head>
  <body>
    <div class="main-container">
      <header>
        <slot name="header">
          <Header />
        </slot>
      </header>
      <main class="layout-main" id="layoutMain">
        <slot />
      </main>
    </div>
    <footer>
      <slot name="footer">
        <Footer />
      </slot>
    </footer>
  </body>
</html>

<style lang="scss">
  .layout-main {
    flex-grow: 1;
  }
  @media screen and (max-width: 636px) {
    .layout-main {
      margin: 6rem 2rem 2rem 2rem;
    }
  }
</style>
